<template>
	<view class="conpon">
		<jnavbar :title="'优惠券详情'"></jnavbar>
		<view class="uni-flex-column-center conpon_top">
			<view class="price">
				<text>￥</text>
				<text>{{ detail.denomination }}</text>
			</view>
			<view class="name">
				<text>{{ detail.name }}</text>
			</view>
			<view class="info">
				<text>满{{ detail.conditions }}减{{ detail.denomination }}</text>
			</view>
			<view class="time">
				<text v-if="detail.time_limit_type == 0">有效期：领取日内{{ detail.limit_time }}天有效</text>
				<text v-if="detail.time_limit_type == 1">有效期：{{ detail.limit_indate_begin }}-{{ detail.limit_indate_end }}</text>
			</view>
			<view class="uni-flex-column btns" @click="usercoupon()"><text>立即领取</text></view>
		</view>
		<view class="conpon_btm">
			<view class="uni-flex-column">
				<text class="title">领取限制</text>
				<view class="tip">
					<view>
						<text>领取张数:</text>
						<text>{{ detail.user_limit_type == 0 ? '不限制' : '每人限领' + detail.user_limit + '张' }}</text>
					</view>
					<!-- 	<view class="">
						<text>领取方式:</text>
					</view> -->
				</view>
				<text class="title">使用限制</text>
				<view class="tip">
					<template v-if="detail.commodity_limit_type == 1">
						<text>商品可用:</text>
						<text @click="togoods(item.id)" class="text" v-for="(item, i) in detail.commodity_limit">{{ item.name }}</text>
					</template>
					<template v-if="detail.commodity_limit_type == 2">
						<text>商品不可用:</text>
						<text class="text" v-for="(item, i) in detail.commodity_limit">{{ item.name }}</text>
					</template>
					<template v-if="detail.commodity_limit_type == 3">
						<text>分类可用:</text>
						<text>{{ detail.limit_value }}</text>
					</template>
				</view>
				<text class="title">使用说明</text>
				<view class="tip"><u-parse :tag-style="style" :domain="baseUrl" :html="detail.instructions"></u-parse></view>
			</view>
		</view>
		<uni-login></uni-login>
	</view>
</template>

<script>
import http from '@/common/http.js';
import {mapState, mapMutations} from 'vuex';
import base from '@/common/baseUrl';
import util from '@/common/util.js';
export default {
	async onLoad(e) {
		await this.$getWx
		this.id = e.id;
		this.getdetail(e.id);
	},
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			detail: {},
			id: '',
			style: {
				// 字符串的形式
				p: 'word-wrap : break-word'
			}
		};
	},
	computed: {

		baseUrl(){
			return util.geturl(base.baseUrl)
		},
		...mapState({
			oss: state => state.oss
		})
	},
	methods: {
		getdetail(id) {
			http('/coupon/' + id, {}, 'GET').then(res => {
				if (res.statusCode == 200) {
					this.detail = res.data.msg;
				}
			});
		},
		//领取优惠券
		usercoupon() {
			let data = {
				coupon_id: this.id
			};
			http('/user/coupon', data, 'POST').then(res => {
				if (res.statusCode == 201) {
					// uni.redirectTo({
					// 	url: 'receive'
					// });
					this.Jumpurl({
						type:1,
						link:'receive',
						login_type: 2
					},'redirec'
					)
				}
			});
		},
		togoods(id) {
			this.Jumpurl({
				type:2,
				id:id,
				login_type: 1
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.conpon {
	width: 720rpx;
	margin-left: 15rpx;
	padding-top: 20rpx;
	.conpon_top {
		width: 100%;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text {
			line-height: 1;
		}
		.price {
			margin-top: 30rpx;
			text {
				color: #ff3c29;
				font-weight: bolder;
			}
			text:last-child {
				font-size: 64rpx;
			}
		}
		.name {
			font-size: 36rpx;
			font-weight: bold;
			margin-top: 20rpx;
		}
		.info {
			font-size: 30rpx;
			margin-top: 10rpx;
		}
		.time {
			font-size: 24rpx;
			margin-top: 10rpx;
		}
		.btns {
			background-color: #ff3c29;
			color: #fff;
			width: 640rpx;
			font-size: 26rpx;
			text-align: center;
			padding: 20rpx 0;
			margin-top: 20rpx;
			border-radius: 40rpx;
			margin-bottom: 20rpx;
		}
	}
	.conpon_btm {
		padding: 0 20rpx;
		background: #fff;
		.title {
			font-size: 28rpx;
			font-weight: bold;
		}
		.tip {
			margin: 20rpx 0;
			font-size: 24rpx;
			text:first-child {
				font-weight: bold;
				width: 140rpx;
				text-align: right;
				display: inline-block;
			}
			.text {
				color: #2979ff;
				margin-left: 10rpx;
			}
		}
	}
}
</style>
